<template>
  <div>
    <div>
      <el-card class="box-card">
        <span class="title">筛选搜索</span>
        <div class="formclass">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row>
              <div class="wxclass">
                <el-form-item
                  label="订单编号"
                  prop="number"
                  placeholder="请输入订单编号"
                >
                  <el-input v-model="form.number" width="120"></el-input>
                </el-form-item>
                <el-form-item label="订单状态" prop="status">
                  <el-select
                    v-model="form.status"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option label="待付款" value="1"></el-option>
                    <el-option label="待派送" value="2"></el-option>
                    <el-option label="已派送" value="3"></el-option>
                    <el-option label="已完成" value="4"></el-option>
                    <el-option label="已取消" value="5"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="收货电话"
                  prop="phone"
                  placeholder="请输入联系电话"
                >
                  <el-input v-model="form.phone" width="120"></el-input>
                </el-form-item>
              </div>
            </el-row>
            <el-row>
              <div class="wxclass">
                <el-form-item
                  label="收货人"
                  prop="number"
                  placeholder="请输入收货人"
                >
                  <el-input v-model="form.consignee" width="120"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </div>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>
    <el-card class="formcard">
      <div class="tableclass">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="编号" prop="id"> </el-table-column>
          <el-table-column label="订单编号" prop="number"> </el-table-column>
          <el-table-column label="提交时间">
            <template slot-scope="scope">{{ scope.row.orderTime }}</template>
          </el-table-column>
          <el-table-column prop="userName" label="用户账号"> </el-table-column>
          <el-table-column label="支付方式">
            <template slot-scope="scope">{{
              scope.row.payMethod | stateFormat(scope.row.payMethod)
            }}</template>
          </el-table-column>
          <el-table-column prop="consignee" label="收货人"> </el-table-column>
          <el-table-column label="订单状态">
            <template slot-scope="scope">{{
              scope.row.status | state(scope.row.status)
            }}</template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="info"
                @click="selectbyid(scope.row.id)"
                round
                >查看订单</el-button
              >
              <el-button
                size="small"
                type="danger"
                round
                @click="deletethisone(scope.row.id)"
                v-if="scope.row.status === 5"
                >删除订单</el-button
              >
              <el-button
                size="small"
                type="danger"
                round
                @click="updateStatusId(scope.row.id)"
                v-if="scope.row.status === 1"
                >取消订单</el-button
              >
              <el-button
                size="small"
                type="success"
                round
                @click="track(scope.row.status)"
                v-if="scope.row.status === 3 || scope.row.status === 4"
                >追踪订单</el-button
              >
              <el-button
                size="small"
                type="primary"
                round
                @click="deliver(scope.row.id)"
                v-if="scope.row.status === 2"
                >订单发货</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-button @click="deletethis()">批量删除</el-button>
          <el-button @click="toggleSelection()">取消选择</el-button>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[3, 4, 5, 6]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div style="height: 300px">
          <el-steps direction="vertical" :active="this.onstatusid">
            <el-step title="已付款"></el-step>
            <el-step title="已发货"></el-step>
            <el-step title="待收货"></el-step>
            <el-step title="已完成"></el-step>
          </el-steps>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getOrdersList,
  deleteOrders,
  updateStatus,
  deletebyidlist,
} from "../../api/order";
export default {
  data() {
    return {
      tableData: [],
      form: {
        number: "",
        status: "",
        phone: "",
        consignee: "",
      },
      multipleSelection: [],
      resultval: [],
      //当前页码
      current: 1,
      //当前条数
      size: 3,
      //总条数
      total: 0,
      //控制显示advAdd层的显示、
      dialogVisible: false,
      onstatusid: "",
    };
  },
  methods: {
    //查询订单消息
    async getOrders() {
      let result = await getOrdersList(
        this.current,
        this.size,
        this.form.number,
        this.form.status,
        this.form.phone,
        this.form.consignee,
        this.form.orderTime
      );
      this.tableData = result.data.ordersList.records;
      this.total = result.data.ordersList.total;
    },
    getorderlist() {
      this.current = 1;
      this.getOrders();
    },

    async deleteCollectbyid() {
      var $this = this;
      let result = await deletebyidlist(this.multipleSelection);
      console.log(result);
      if (result.data.code === 200) {
        //弹出消息
        $this.$message({
          message: "删除成功",
          type: "success",
          duration: 2000,
        });
        //查询数据
        this.getorderlist();
      }
    },

    async deleteOrder(id) {
      var $this = this;
      let result = await deleteOrders(id);
      if (result.data.code === 200) {
        //弹出消息
        $this.$message({
          message: "删除成功",
          type: "success",
          duration: 2000,
        });
        //查询数据
        this.getorderlist();
      }
    },
    //批量删除
    deletethis() {
      this.$confirm("确认删除？")
        .then((_) => {
          this.deleteCollectbyid();
          done();
        })
        .catch((_) => {});
    },

    //单个删除
    deletethisone(id) {
      this.$confirm("确认删除？")
        .then((_) => {
          this.deleteOrder(id);
          done();
        })
        .catch((_) => {});
    },

    //查看订单
    selectbyid(id) {
      this.$router.push({ name: "ordersall", params: { id: id } });
    },
    //追踪订单
    track(statusid) {
      this.dialogVisible = true;
      this.onstatusid = statusid;
    },
    async updateStatus(id) {
      var $this = this;
      let result = await updateStatus(id);
      if (result.data.code === 200) {
        //弹出消息
        $this.$message({
          message: "订单已取消",
          type: "success",
          duration: 800,
        });
        //查询数据
        this.getorderlist();
      }
    },
    //单个删除
    updateStatusId(id) {
      this.$confirm("确认取消？")
        .then((_) => {
          this.updateStatus(id);
          done();
        })
        .catch((_) => {});
    },
    //订单发货
    deliver(id) {
      this.$router.push({ name: "ordershipment", params: { id: id } });
    },
    //查询按钮
    onSubmit() {
      this.getOrders();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = [];
      for (let i = 0; i < val.length; i++) {
        this.multipleSelection.push(val[i].id);
      }
    },
    handleSizeChange(val) {
      this.size = val;
      this.onSubmit();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.onSubmit();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.form = {};
          this.dialogVisible = false;
          done();
        })
        .catch((_) => {});
    },
  },
  created() {
    this.onSubmit();
  },
  //过滤器
  filters: {
    stateFormat(stateId) {
      if (stateId == 0) return "未支付";
      if (stateId == 1) return "微信";
      if (stateId == 2) return "支付宝";
      return;
    },
    state(status) {
      if (status == 1) return "待付款";
      if (status == 2) return "待派送";
      if (status == 3) return "已派送";
      if (status == 4) return "已完成";
      if (status == 5) return "已取消";
      return;
    },
  },
};
</script>

<style lang="less" scoped>
.wxclass {
  display: flex;
  margin-top: 25px;
}
.box-card {
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 15px;
}
.formcard {
  border-radius: 15px;
}
.el-form-item {
  margin-right: 50px;
}
</style>